<template>
  <div class="timeLine-comp-ct">
    <div class="timeLine" @mousewheel="mouseScroll()">
      <div class="pointer" @mousedown="eresize" @mouseover="getCurTime()" @mouseout="popVisible = false">
        <el-popover placement="bottom" width="180" trigger="manual" :content="popContent" v-model="popVisible"> </el-popover>
      </div>
      <div class="section">
        <div class="bg">
          <div v-for="(item, index) in timeBlock" :title="`${item.startTime}-${item.endTime}`" class="timeBlock" :key="index" :style="item.style"></div>
        </div>
        <div class="scale" v-for="(item, index) in part" :key="index" :title="getTitle(item)" @click="getItem(item)"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  model: {},
  props: {
    startTime: {
      trype: String,
      default: '2022-04-20 08:07:12',
    },
    endTime: {
      trype: String,
      default: '2022-04-21 08:07:12',
    },
    parts: {
      trype: Number,
      default: 10,
    },
  },
  data() {
    return {
      part: this.parts,
      backgroundColor: 'rgba(0, 119, 255, 0.349)',
      sectionTimeList: [],
      popVisible: false,
      popContent: '',
      recordTimeList: [
        { time: '2022-04-20 14:47:02', flag: 'end' },
        { time: '2022-04-20 17:04:24', flag: 'start' },
        { time: '2022-04-20 18:21:44', flag: 'end' },
        { time: '2022-04-20 22:21:45', flag: 'start' },
        { time: '2022-04-20 23:21:45', flag: 'end' },
      ],
      timeBlock: [{ style: `left:12.5%;width:3.6%;` }],
    };
  },
  created() {
    this.getTimeArr();
    this.getBg();
  },
  methods: {
    getTimeArr() {
      let etime = new Date(this.endTime);
      let stime = new Date(this.startTime);
      let time = etime - stime;
      let timeS = Math.round(time / this.part);
      this.sectionTimeList = [{ time: this.startTime, children: [] }];
      for (let i = 1; i <= this.part; i++) {
        let temp = new Date(stime.getTime() + timeS * i);
        this.sectionTimeList.push({ time: this.dateFtt('yyyy-MM-dd hh:mm:ss', temp), children: [] });
      }
      for (const i in this.sectionTimeList) {
        for (const j in this.recordTimeList) {
          if (this.sectionTimeList[i - 1] == undefined) {
            if (new Date(this.sectionTimeList[i].time) > new Date(this.recordTimeList[j].time)) {
              this.sectionTimeList[i].children.push({ time: this.recordTimeList[j].time, flag: this.recordTimeList[j].flag });
            }
          } else {
            if (
              new Date(this.sectionTimeList[i].time) > new Date(this.recordTimeList[j].time) &&
              new Date(this.sectionTimeList[i - 1].time) < new Date(this.recordTimeList[j].time)
            ) {
              this.sectionTimeList[i].children.push({ time: this.recordTimeList[j].time, flag: this.recordTimeList[j].flag });
            }
          }
        }
      }
      this.sectionTimeList.map((item) => {
        if (item.children.length > 1) {
          item.children.sort((a, b) => new Date(a.time) - new Date(b.time));
        }
      });
    },
    getTitle(item) {
      if (this.sectionTimeList[item]) {
        return `${this.sectionTimeList[item - 1].time}-${this.sectionTimeList[item].time}`;
      } else {
        return `${this.sectionTimeList[item - 1].time}-`;
      }
    },
    getBg() {
      this.timeBlock = [];
      let totalTime = (new Date(this.endTime) - new Date(this.startTime)) / 1000;

      for (let i = 0; i < this.recordTimeList.length; i++) {
        if (this.recordTimeList[i].flag == 'start') {
          if (this.recordTimeList[i + 1]) {
            if (this.recordTimeList[i + 1].flag == 'end') {
              let left = (new Date(this.recordTimeList[i].time) - new Date(this.startTime)) / 1000;
              left = Math.round((left / totalTime) * 1000) / 10;
              let right = (new Date(this.recordTimeList[i + 1].time) - new Date(this.startTime)) / 1000;
              right = Math.round((right / totalTime) * 1000) / 10;
              this.timeBlock.push({
                startTime: this.recordTimeList[i].time,
                endTime: this.recordTimeList[i + 1].time,
                style: `left:${left}%;width:${right - left}%;`,
              });
            }
          } else {
            let left = (new Date(this.recordTimeList[i].time) - new Date(this.startTime)) / 1000;
            left = Math.round((left / totalTime) * 1000) / 10;
            this.timeBlock.push({
              startTime: this.recordTimeList[i].time,
              endTime: this.endTime,
              style: `left:${left}%;width:${100 - left}%;`,
            });
          }
          i++;
        } else if (this.recordTimeList[i].flag == 'end' && i == 0) {
          let right = (new Date(this.recordTimeList[i].time) - new Date(this.startTime)) / 1000;
          right = Math.round((right / totalTime) * 1000) / 10;
          this.timeBlock.push({
            startTime: this.startTime,
            endTime: this.recordTimeList[i].time,
            style: `left:0%;width:${right}%;`,
          });
        }
      }
      console.log(this.timeBlock);
    },
    getItem(item) {},
    mouseScroll() {
      event.stopPropagation();
      event.preventDefault();
      this.$forceUpdate();
      if (event.wheelDelta > 0) {
        // 放大
        this.part++;
        this.$nextTick(() => {
          this.getTimeArr();
        });
      } else {
        // 缩小
        if (this.part < 5) {
          return;
        }
        this.part--;
        this.$nextTick(() => {
          this.getTimeArr();
        });
      }
    },
    dateFtt(fmt, date) {
      var o = {
        'M+': date.getMonth() + 1, //月份
        'd+': date.getDate(), //日
        'h+': date.getHours(), //小时
        'm+': date.getMinutes(), //分
        's+': date.getSeconds(), //秒
        'q+': Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
      return fmt;
    },
    // 横向拉伸
    eresize() {
      document.onmousemove = function() {
        const sideWidth = event.clientX - document.querySelector('.timeLine-comp-ct').getBoundingClientRect().left;
        if (sideWidth < 0 || sideWidth > document.querySelector('.timeLine-comp-ct').offsetWidth) {
          return;
        }
        document.querySelector('.timeLine-comp-ct .pointer').style.left = sideWidth + 'px';
      };
      document.onmouseup = function() {
        document.onmousemove = null;
      };
    },
    getCurTime() {
      let parentWidth = document.querySelector('.timeLine-comp-ct').offsetWidth;
      let curLeft =
        document.querySelector('.timeLine-comp-ct .pointer').style.left == '' ? 2 : parseInt(document.querySelector('.timeLine-comp-ct .pointer').style.left);
      let temp = ((curLeft - 2) / parentWidth) * 100;
      let stime = (new Date(this.endTime).getTime() - new Date(this.startTime).getTime()) / 100;
      let a = new Date(new Date(this.endTime).getTime() + temp * stime);
      this.popContent = this.dateFtt('yyyy-MM-dd hh:mm:ss', a);
      this.popVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.timeLine-comp-ct {
  position: relative;
  height: 30px;
  width: 100%;

  .timeLine {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(204, 204, 204, 0);
    display: flex;
    flex-direction: column;

    .pointer {
      position: absolute;
      left: 0px;
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #076aff;
      cursor: e-resize;
      z-index: 99;

      /deep/ .el-popover {
        left: -90px;
        top: -50px;
        line-height: 0.4;
        user-select: none;
      }
    }

    .section {
      position: relative;
      width: 100%;
      flex: 1;
      display: flex;
      align-items: flex-end;

      .bg {
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 0;

        .timeBlock {
          position: absolute;
          top: 0;
          height: 100%;
          background: rgba(0, 119, 255, 0.349);
          cursor: pointer;
          z-index: 98;
        }
      }

      .scale {
        position: relative;
        width: 10%;
        height: 50%;
        flex: 1;
        text-align: center;
        border-right: 2px solid #000;
      }
    }
  }
}
</style>
